<!-- 商品信息 & 集装箱信息 导入 -->
<template>
    <div>
        <Modal width="540" :value="value" @input="handleInput" :mask-closable="false" :closable="false" class="import-modal">
            <div slot="header">
                {{ title }}
                <Icon class="f-fr" type="ios-close" @click="closeModal"/>
            </div>
            <Form :label-width="46" ref="importRef" :model="importMenber">
                <FormItem label="①">
                    <h6> {{ subTitle }} </h6>
                    <p> {{ hintTxt }} </p>
                    <a @click="downloadTemplate" style="font-size:14px;">
                        <Icon class="custom-icon-style" type="ios-download-outline"></Icon>
                        点击下载模板
                    </a>
                </FormItem>
                <FormItem label="②">
                    <h6>上传数据文件</h6>
                    <p>目前支持的文件类型为 *.xls，*.xlsx，*csv，文件4M。</p>
                    <Upload
                        ref="uploadExcel"
                        :before-upload="handleUpload"
                        :on-exceeded-size="handleMaxSize"
                        accept=".xls,.xlsx,.csv"
                        :format="['xls','xlsx','.csv']"
                        :max-size="4096"
                        :action="actionUrl"
                    >
                        <Button size="small" type="primary" class="add-file-btn" @click="addFileHandle">添加文件</Button>
                        <br>
                        <span @click="removeFile" class="import-file-name">{{ importMenber.fileName }}</span>
                    </Upload>
                    <Progress
                        v-if="importMenber.ifUpload"
                        :percent="importMenber.uploadProgress"
                        :status="importMenber.uploadStatus"
                    >
                    </Progress>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button
                    type="default"
                    @click="closeModal"
                    :disabled="importMenber.uploadProgress !== 0 && importMenber.uploadProgress !== 100"
                >取消
                </Button>
                <Button
                    type="primary"
                    @click="importExcel"
                    :disabled="importMenber.file == null || (importMenber.uploadProgress !== 0 && importMenber.uploadProgress !== 100)"
                >
                    {{importMenber.btnText}}
                </Button>
            </div>
        </Modal>

        <!--导入成功-->
        <Modal class-name="no-border" v-model="importSuccessModal" width="390" :closable="false" :mask-closable="false">
            <div slot="header">
                导入成功
                <Icon class="f-fr" type="ios-close" @click="importSuccessModal = false"/>
            </div>
            <div class="clearfix">
                <div class="f-fl icon">
                    <Icon type="ios-checkmark-circle"/>
                </div>
                <div class="f-fl modal-content">
                    导入完成
                </div>
            </div>
            <div slot="footer">
                <Button type="default" @click="showImportData">查看导入的数据</Button>
                <Button type="primary" @click="reImport">继续导入</Button>
            </div>
        </Modal>

        <!-- 导入失败 -->
        <Modal v-model="importFailureModal" width="746" class="col-2" :closable="false">
            <div slot="header">
                导入失败
                <Icon class="f-fr" type="ios-close" @click="importFailureModal = false"/>
            </div>
            <Table :columns="importErrorColumns" :data="importErrorTable"></Table>
            <div slot="footer">
                <Button type="default" @click="importFailureModal = false">取消</Button>
                <Button type="primary" @click="reImport">重新导入</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { downloadFile } from '@/api/downloadTemp'
import { importDetailGoods, batchimportContainer } from '@/api/declare'

export default {
    name: 'DeclareInfoImportModal',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        declareInfoImport: {
            default: function () {
                return {
                    title: '',
                    subTitle: '',
                    hintTxt: '',
                    actionUrl: '',
                    downLoadUrl: '',
                    type: '',
                    declareId: '',
                    importType: ''
                }
            },
            type: Object
        }
    },
    data () {
        return {
            title: '',
            subTitle: '',
            hintTxt: '',
            actionUrl: '',
            downLoadUrl: '',
            type: '', // 类型: 进口-JK  出口-CK  进境-JJ  出境-CJ
            declareId: '',
            importType: '', // 导入的类型   goods-商品信息导入  container-集装箱信息导入

            importMenber: {
                ifUpload: false,
                file: null,
                fileName: '',
                uploadProgress: 0,
                uploadStatus: 'normal',
                btnText: '导入'
            },
            importSuccessModal: false, // 导入成功
            importFailureModal: false, // 导入失败
            importErrorTable: [], // 导入失败列表
            importErrorColumns: [
                {
                    title: '行号',
                    key: 'rowNum',
                    width: 100
                },
                {
                    title: '错误描述',
                    key: 'message',
                    render: (h, params) => {
                        return h('div', [
                            h('span', [
                                h('Poptip', {
                                    props: {
                                        trigger: 'hover',
                                        confirm: false,
                                        content: params.row.message,
                                        size: 'small'
                                    },
                                    style: {
                                        display: 'inline-block',
                                        width: '100%',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }
                                }, params.row.message)
                            ])
                        ])
                    }
                }
            ]
        }
    },
    created () {
        this.init(this.declareInfoImport)
    },
    methods: {
        init (params) {
            this.title = params.title
            this.subTitle = params.subTitle
            this.hintTxt = params.hintTxt
            this.actionUrl = params.actionUrl
            this.downLoadUrl = params.downLoadUrl
            this.type = params.type
            this.declareId = params.declareId
            this.importType = params.importType

            this.importMenber.btnText = '导入'
            this.importErrorTable = []
        },

        closeModal () {
            this.removeFile()
            this.handleInput(false)
        },
        handleInput (v) {
            this.$emit('input', v)
        },
        addFileHandle () {
            this.removeFile()
        },

        // 删除文件
        removeFile () {
            this.importMenber.file = null
            this.importMenber.fileName = ''
            this.importMenber.ifUpload = false
            this.importMenber.uploadProgress = 0
            this.importMenber.uploadStatus = 'normal'
        },

        // 下载模板
        downloadTemplate () {
            downloadFile(this.downLoadUrl)
        },

        handleUpload (file) {
            if (!/\.(xls|xlsx)$/.test(file.name)) {
                this.$Message.warning('文件 ' + file.name + ' 类型不正确')
                this.importMenber.file = null
                this.importMenber.fileName = ''
            } else if (file.size / 1024 > 5120) {
                this.$Message.warning('文件 ' + file.name + ' 大小不能超过4M')
                this.importMenber.file = null
                this.importMenber.fileName = ''
            } else {
                this.importMenber.file = file
                this.importMenber.fileName = file.name
            }
            return false
        },

        handleMaxSize (file) {
            this.$Message.warning('文件 ' + file.name + ' 大小不能超过4M')
        },

        importExcel () {
            if (this.importMenber.btnText === '完成') {
                this.closeModal()
            } else {
                this.importMenber.uploadProgress = 0
                this.importMenber.uploadStatus = 'normal'
                let excelData = new FormData()
                excelData.append('file', this.importMenber.file)
                this.importMenber.ifUpload = true
                let progressTime = setInterval(() => {
                    if (this.importMenber.uploadProgress <= 70) {
                        this.importMenber.uploadProgress += 10
                        this.importMenber.uploadStatus = 'active'
                    }
                }, 300)

                if (this.importType === 'goods') { // 商品信息导入
                    importDetailGoods(excelData, this.declareId, this.type).then(res => {
                        clearInterval(progressTime)
                        if (res.data.code === '0000') { // 导入成功
                            this.importMenber.uploadProgress = 100
                            this.importMenber.uploadStatus = 'success'
                            this.importMenber.btnText = '完成'
                            this.importSuccessModal = true // 导入成功弹出框
                            this.$Message.success(res.data.msg)
                            let resData = {
                                importType: this.importType,
                                list: res.data.data.success
                            }
                            this.importSuccessAfter(resData) // 更新列表数据
                        } else { // 导入失败
                            this.importMenber.uploadProgress = 100
                            this.importMenber.uploadStatus = 'wrong'
                            if (res.data.data.fail && Object.prototype.toString.call(res.data.data.fail) === '[object Array]') {
                                this.importFailureModal = true
                                this.importErrorTable = res.data.data.fail
                            } else {
                                this.$Message.warning(
                                    {
                                        content: res.data.msg + ',' + res.data.data,
                                        duration: 6,
                                        closable: true
                                    }
                                )
                            }
                        }
                    }, err => {
                        clearInterval(progressTime)
                        this.importMenber.uploadStatus = 'wrong'
                        this.$Message.error(err.message)
                    })
                } else { // 集装箱信息导入
                    batchimportContainer(excelData, this.declareId).then(res => {
                        clearInterval(progressTime)
                        if (res.data.code === '0000') { // 导入成功
                            this.importMenber.uploadProgress = 100
                            this.importMenber.uploadStatus = 'success'
                            this.importMenber.btnText = '完成'
                            this.importSuccessModal = true // 导入成功弹出框
                            this.$Message.success(res.data.msg)
                            let resData = {
                                importType: this.importType
                            }
                            this.importSuccessAfter(resData) // 更新列表数据
                        } else { // 导入失败
                            this.importMenber.uploadProgress = 100
                            this.importMenber.uploadStatus = 'wrong'
                            if (Object.prototype.toString.call(res.data.data) === '[object Array]') {
                                this.importFailureModal = true
                                this.importErrorTable = res.data.data
                            } else {
                                this.$Message.warning(
                                    {
                                        content: res.data.msg + ',' + res.data.data,
                                        duration: 6,
                                        closable: true
                                    }
                                )
                            }
                        }
                    }, err => {
                        clearInterval(progressTime)
                        this.importMenber.uploadStatus = 'wrong'
                        this.$Message.error(err.message)
                    })
                }
            }
        },

        showImportData () {
            this.removeFile()
            this.importSuccessModal = false
            this.importModal = false
            this.closeModal()
        },

        reImport () {
            this.removeFile()
            this.importMenber.btnText = '导入'
            this.importSuccessModal = false
            this.importFailureModal = false
        },

        importSuccessAfter (resData) {
            this.$emit('importSuccess', resData)
        }

    } // methods end
}
</script>

<style lang="less">
    .import-modal {
        .add-file-btn {
            padding: 5px 18px;
            border-radius: 2px;
        }

        .custom-icon-style {
            font-size: 18px;
            font-weight: bold;
            vertical-align: -1px;
        }

        .import-file-name {
            cursor: pointer;
        }
    }
</style>
